﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
    <div id="grid"></div>
    </form>
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="extjs/pagemethods-proxy.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
	    // lets make an object of pagemethod proxy first    	
	    var pmProxy = new Ext.data.PageMethodProxy({
		    pageMethod: 'GetProducts'
	    });
           
        // create the Data Store
        var store = new Ext.data.JsonStore({
            root: 'lstProducts',
            totalProperty: 'RowCount',
            idProperty: 'ProductID',
		    fields: [
                'Name','ProductID', 'ProductNumber', 'ReorderPoint','SafetyStockLevel'
            ],
            proxy:pmProxy
        });
        
        // create paging bar
        var pagingBar = new Ext.PagingToolbar({
            pageSize: 20,
            store: store,
            emptyMsg: "No topics to display"
        });
        
        // create the grid
        var grid = new Ext.grid.GridPanel({
            el:'grid',
            width:1000,
            height:800,
            title:'Adventure Works Products',
            store: store,
            stripeRows: true,
            loadMask: true,
            enableHdMenu: false,

            // grid columns
            columns:[{
        	    header: "id",
        	    id: 'ProductID',
                dataIndex: 'ProductID',
                hidden:true
            },{
                header: "Product Name",
                dataIndex: 'Name',
                width: 400
            },{
                header: "Product Number",
                dataIndex: 'ProductNumber',
                width: 200
            },{
                header: "Safety Stock Level",
                dataIndex: 'SafetyStockLevel',
                width: 200
            }],
            // put paging bar on the bottom
            bbar: pagingBar
        });

        grid.render();
        
        // set parameters for initial loading
        store.load({
    	    params:{
    		    start:0, 
    		    limit:20
    	    }
        });
    });
    </script>
</body>
</html>
